<template>
  <div class="page">
    <p>page</p>
    <br />
    <!-- hooks测试 -->
    <p>@vueuse/core 示例：</p>
    <p>鼠标位置: x:{{ x }} y:{{ y }}</p>
    <br />
    <p>@vueuse/components 示例：</p>
    <!-- clickOutside组件 -->
    <onClickOutside class="box-container" @trigger="close">
      <div class="box">点击外部触发：{{ clickCount }}</div>
    </onClickOutside>
  </div>
</template>

<script setup name="page">
  // hooks测试
  import { useMouse } from '@vueuse/core';
  const { x, y } = useMouse();
  // clickoutside 无渲染组件测试
  const clickCount = ref(0);
  const close = () => {
    // alert('外侧点击被触发');
    clickCount.value++;
  };
</script>

<style lang="less" scoped>
  .page {
    color: #fff;
  }
  .box-container {
    width: fit-content;
  }
  .box {
    width: 200px;
    height: 200px;
    border: 1px solid #fc9;
  }
</style>
